<template>
    <div>
        <div class="find">
            搜索条件
            <div class="select">
                <div class="name">公司名称：<el-input v-model="companyName" placeholder="请输入公司名称"></el-input></div>
                <!-- <div class="phone">手机号：<el-input v-model="phone" placeholder="请输入手机号"></el-input></div> -->
                <el-button class="found" type="primary" @click="found">查询</el-button>
                <el-button class="daochu" type="primary" @click="daochu">导出</el-button>
            </div>
        </div>
        <div class="top">
            提现审核
            <el-table height="380" ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange"
                :header-cell-style="{
                    'border-bottom': '5px solid #eee'
                }">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="companyName" label="公司名称" width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="88">
                    <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
                </el-table-column>
                <el-table-column prop="idCard" label="身份证号" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="bankCardNo" label="收款方账号" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="bank" label="开户行名" width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="money" label="提现金额（元）" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="证件" show-overflow-tooltip>
                    <template slot-scope="scope" width="120">
                        <el-button @click="idcard(scope.row)" type="text" size="small">身份证</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">同意</el-button>
                    </template>
                </el-table-column>
               
            </el-table>
            <el-button @click="deleteFileOrDirectory(multipleSelection)" :disabled="this.multipleSelection.length === 0">全部同意</el-button>
        </div>
         <!-- 身份证 -->
         <el-dialog title="身份证照片" :visible.sync="show" width="677px">
            <!-- <div class="title">身份证照片</div> -->
            <ul class="idcard">
            <li>
                <img :src="zhengIdCardUrl" alt="">
            </li>
            <li>
                <img :src="fanIdCardUrl" alt="">
            </li>
            </ul>
        </el-dialog>
    </div>
</template>

<script scoped>
    export default {
        inject:['reload'], 
        data() {
            return {
                ids:[],
                tableData1: [],
                multipleSelection: [],
                show:false,
                zhengIdCardUrl:'',
                fanIdCardUrl:'',
                id:'',
                companyName:''
            }
        },
        created() {
            this.list()
            
        },
        
        methods: {
            //  //导出提现记录
             daochu(){
               this.downFile()
            },
              //导出提现记录
              downFile(){
                // if(!this.value1){
                //     alert('请选择时间')
                // }else{
                //     this.value1 = this.time(new Date(this.value1))
                    this.$axios({
                        method: 'get',
                        url: '/xls/exportWithdrawalAuditRecord',
                        params: {
                            companyName:this.companyName,     
                        },
                        responseType: 'arraybuffer'
                        }).then(res=>{
                            console.log(res.data)
                            var fileName = '工资详情.xlsx'//此处获取文件名称
                　　　　　　　this.download(res.data,fileName) //此处跳转到第三步
                            this.show5 = false
                        },err=>{
                            console.log(err);
                    })
                // }
                
                }, 
                download (data,fileName) {
            　　　if (!data) {
            　　　　　return
            　　　}
            　　　let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
            　　　let link = document.createElement('a') //创建a标签
            　　　link.style.display = 'none'  //将a标签隐藏
            　　　link.href = url  //给a标签添加下载链接
            　　　link.setAttribute('download', fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            　　　document.body.appendChild(link)  
            　　　link.click()  //执行a标签
            　　},
             //身份证
            idcard(row){
                console.log(row)
                this.show = true
                this.id = row.userIdByIdCard
                this.$axios({
                    method: 'get',
                    url: '/laowuUser/viewIDCard',
                    params: {
                        id:this.id
                    }
                    }).then(res=>{
                        console.log(res.data);
                        this.zhengIdCardUrl=res.data.data[0]
                        this.fanIdCardUrl=res.data.data[1]
                    },err=>{
                        console.log(err);
                })

            },
            //查询
            found(){
                this.$axios({
                    method: 'post',
                    url: '/laowuUser/withdrawalAuditrecord',
                    params: {
                        companyName:this.companyName
                    }
                }).then(res => {
                    console.log(res.data,"999999999");
                    this.tableData1 = res.data.data
                    // this.id = res.data.data[0].userIdByIdCard
                }, err => {
                    console.log(err);
                })
            },
            //提现审核数据
            list() {
                this.$axios({
                    method: 'post',
                    url: '/laowuUser/withdrawalAuditrecord',
                    params: {
                        companyName:this.companyName
                    }
                }).then(res => {
                    this.tableData1 = res.data.data
                }, err => {
                    console.log(err);
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection,"选中的")
            },
            handleClick(index, row) {
                console.log(index, row)
                this.$axios({
                    method: 'post',
                    url: '/laowuUser/batchWithdrawalAudit',
                    params:{
                        withdrawals:row.id
                    }
                }).then(res => {
                    if(res.data.code = 200){
                        this.tableData1.forEach(element => {
                            if(element.id==row.id){
                                this.tableData1.splice(index ,1)
                            }
                        });
                        // this.reload();
                        this.$router.go(0)
                    }
                    
                }, err => {
                    console.log(err);
                })
                
            },
            huanshu(arr,arr2){
                for(let k of arr){
                    arr2 = arr2.filter(item => item !== k );
                }
                this.tableData1=arr2
            },
            deleteFileOrDirectory(row) {
                console.log(row)
                for(let i=0;i<row.length;i++){
                    this.ids += this.multipleSelection[i].id +","
                }
                // console.log(this.ids)
                // console.log('aaaaaaaaaaaaaaaaa')
                
                this.$axios({
                    method: 'post',
                    url: '/laowuUser/batchWithdrawalAudit',
                    params:{
                        withdrawals:this.ids
                    }
                }).then(res => {
                    if(res.data.code = 200){
                       this.huanshu(this.multipleSelection,this.tableData1)
                    //    this.reload();
                    this.$router.go(0)
                    }
                    
                }, err => {
                    console.log(err);
                })
            }
                            
        }
    }
</script>

<style>
    h1,
    h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
  
    .find .select{
        /* width: 1040px; */
        height: 90px;
        /* line-height: 90px; */
        background: #FFFFFF;
        display: flex;
        /* justify-content: space-around; */
        align-items: center;
        margin-top: 16px;
        margin-bottom: 28px;
    }
    .find .select .name{
        margin-left: 20px;
        margin-right: 60px;
    }
    .find .select .el-input{
        border: none;
        width: 200px;
        height: 30px;
        background: #FFFFFF;
        border-radius: 2px;
        /* border: 1px solid #D5DAE1; */
    }
    .find .daochu{
        height: 30px;
        /* line-height: 30px; */
        margin-left: 600px;

    }

    .el-table {
        width: 1040px;
        height: 316px;
        background: #FFFFFF;
        margin-top: 16px;
    }
    .idcard li{
        display: inline-block;
    }
    .idcard li img{
        margin-top:60px;
        width: 296px;
        height: 185px;
        /* margin-right: 0px; */
    }
</style>